<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        span {
            width: 36px;
            background: #50bfff;
            text-align: center;
            border-left: 1px solid #50bfff;
            display: inline-block;
          }
          span.c {
            background: #13ce66;
            border-left: 1px solid #13ce66;
          }
          span.w {
            background: #ff4949;
            border-left: 1px solid #ff4949;
          }
          span.n{
            background: #f7ba2a;
            border-left: 1px solid #f7ba2a;
          }
    </style>
</head>
<body>

   <!--消息-->
   <span class="q">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1529119258225" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="2352" data-spm-anchor-id="a313x.7781069.0.i0" width="20" height="24">
      <path d="M440 895.04a8 8 0 0 1 8.16-8h128a8.16 8.16 0 0 1 8.16 8V1008a8 8 0 0 1-8.16 8H448a8.16 8.16 0 0 1-8.16-8zM440 16a8 8 0 0 1 8-8h128a8.16 8.16 0 0 1 8.16 8v725.76a8 8 0 0 1-8.16 8h-128a8.16 8.16 0 0 1-8.16-8z" p-id="2353" data-spm-anchor-id="a313x.7781069.0.i1" class="selected" fill="#ffffff"/>
    </svg>
  </span>
  <!--正确-->
  <span class="c">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1529119304590" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="3045" width="22" height="18">
      <path d="M854.214059 149.645229 407.607418 596.249823 198.257389 386.900817 72.196299 512.961908 407.505088 851.432713 979.661166 279.276634Z" p-id="3046" fill="#ffffff"/>
    </svg>
  </span>
  <!--错误-->
  <span class="w">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1529119330508" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="3781" width="18" height="18">
      <path d="M598.050133 501.623467l265.693867-265.693867c26.385067-26.385067 26.453333-69.666133-0.2048-96.324267-26.8288-26.8288-69.802667-26.760533-96.3584-0.2048l-265.693867 265.693867-265.693867-265.693867c-26.555733-26.555733-69.495467-26.658133-96.3584 0.2048-26.658133 26.658133-26.589867 69.9392-0.2048 96.324267l265.693867 265.693867-265.693867 265.693867c-26.385067 26.385067-26.453333 69.666133 0.2048 96.3584 26.8288 26.8288 69.802667 26.760533 96.3584 0.2048l265.693867-265.693867 265.693867 265.693867c26.555733 26.555733 69.495467 26.658133 96.3584-0.2048 26.658133-26.658133 26.589867-69.9392 0.2048-96.3584L598.050133 501.623467 598.050133 501.623467z" fill="#ffffff" p-id="3782"/>
    </svg>
  </span>
  <!--警告-->
  <span class="n">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1529119354395" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="4509" width="28" height="24">
      <path d="M660.788 255.77c-41.479-29.908-93.578-44.859-156.302-44.859-47.695 0-87.972 10.518-120.681 31.58-51.917 32.964-79.494 88.955-82.841 167.905h120.317c0-23.03 6.729-45.115 20.118-66.508 13.426-21.321 36.201-31.98 68.327-31.98 32.669 0 55.191 8.663 67.452 25.944 12.337 17.354 18.484 36.523 18.484 57.553 0 18.338-9.168 35.107-20.268 50.318a104.717 104.717 0 0 1-24.045 24.519s-65.234 41.839-93.87 75.459c-16.589 19.468-18.081 48.683-19.57 90.524-0.074 2.982 1.052 9.165 11.458 9.165h93.54c9.315 0 11.241-6.88 11.352-9.971 0.654-15.206 2.326-23.028 5.127-31.833 5.244-16.63 19.578-31.106 35.622-43.623l33.107-22.811c29.908-23.321 53.734-42.422 64.285-57.409 17.972-24.599 30.635-54.94 30.635-90.957-0.035-58.759-20.772-103.036-62.247-133.016zM502.56 717.502c-41.442-1.276-75.638 27.428-76.949 72.402-1.272 44.896 31.215 74.619 72.694 75.82 43.257 1.269 76.544-26.453 77.895-71.422 1.235-44.967-30.344-75.531-73.64-76.8z" p-id="4510" fill="#ffffff"/>
    </svg>
  </span>
</body>
</html>